<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">安装说明文档</div>
			<div class="sub-title quote">
				这是一个基于Vue2.x的UI组件库
			</div>
			
			<div class="example-title">使用NPM安装</div>
			<code-view>
				<template slot="code-bash">{{ code01 }}</template>
			</code-view>
			
			<div class="example-title">使用CDN方式引入</div>
			<code-view>
				<template slot="code-bash">{{ code02 }}</template>
			</code-view>
			
			<div class="example-title">全量引入</div>
			<code-view>
				<template slot="code-js">{{ code03 }}</template>
			</code-view>
			
			<div class="example-title">按需引入（方案一）</div>
			<div class="example-sub-title quote">
				该组件库是以ESModule规范编写的，也就是说，它可以被tree-shaking
				<br>webpack很早就支持了tree-shaking功能
				<br>如果你的项目使用vue-cli生成，那么你不需要做任何额外工作，便可以完成按需打包
			</div>
			<code-view>
				<template slot="code-js">{{ code04 }}</template>
			</code-view>
			
			<div class="alert">
				<p class="alert">什么是tree-shaking？</p>
				<p style="line-height: 26px;">
					中文名称，叫做<span class="success">摇树</span>
				</p>
				<p style="line-height: 26px;">把代码中用不到的冗余内容全部剔除，就好像在摇一个树，把失去连接的叶子摇下来</p>
				<p style="line-height: 26px;">然而对着你的代码做 tree-shaking（摇树）这个动作是有前提的</p>
				<p style="line-height: 26px;">它要求你的代码遵循ESModule规范，并进行模块的静态导入</p>
				<p style="line-height: 26px;">这样分析工具能够较为容易的分析出你import了多少内容，而哪些你实际上没有用到</p>
			</div>	
			
			<div class="example-title">按需引入（方案二）</div>
			<div class="example-sub-title quote">
				如果你发现你的打包工具，没有tree-shaking效果（无法按需打包）
				<br>不用着急和惊慌，你只需要老老实实的挨个引入需要的组件即可，它放在<span class="danger">ES</span>这个目录下
			</div>
			<code-view>
				<template slot="code-js">{{ code05 }}</template>
			</code-view>
			
			<div class="example-title">按需引入（方案三）</div>
			<div class="example-sub-title quote">
				引入一个babel的插件，它能帮你自动转换组件的引入代码
			</div>
			<code-view>
				<template slot="code-bash">{{ code06 }}</template>
			</code-view>
			
			<code-view>
				<template slot="code-js">{{ code07 }}</template>
			</code-view>
			
			<code-view>
				<template slot="code-js">{{ code08 }}</template>
			</code-view>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<center>
					<br><br><br><br><br><br><br><br><br><br>
					<img src="../assets/logo.png" width="20%">
					<p>
						<img src="../assets/logo-text.png" width="40%" >
					</p>
				</center>
			</div>
		</div>
	</div>
</template>

<script>
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			CodeView
		},
		data() {
			return {
				code01: `npm install gabriel-ui --save`,
				code02: `暂不支持`,
				code03: `import GabrielUI from 'gabriel-ui'
Vue.use(GabrielUI)`,
				code04: `import {Button, Table} from 'gabriel-ui'
Vue.use(Button)
Vue.use(Table)`,
				code05: `import Button from 'gabriel-ui/es/button'
import Toast from 'gabriel-ui/es/toast'
Vue.use(Button)
Vue.use(Toast)
//如果你觉得这样写太麻烦了，你可以尝试第三种方案`,
				code06: `# 安装插件
npm install babel-plugin-import --save-dev`,
				code07: `// 在.babelrc 中添加配置
// 注意，Gabriel-UI的样式代码是放在组件内引入的，我们不需要插件帮我们生成引入style的语句
// 因此，style要设置为false
{
  "plugins": [
    ["import", {
      "libraryName": "gabriel-ui",
      "libraryDirectory": "es",
      "style": false
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'gabriel-ui',
      libraryDirectory: 'es',
      style: false
    }, 'gabriel-ui']
  ]
};`,
				code08: `//接下来，你就可以按照方案一按需引入代码了
import {Button, Table} from 'gabriel-ui'
Vue.use(Button)
Vue.use(Table)
//因为，插件会帮你把方案一的代码，自动转换成了方案二
`,
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
